<template>
  <div class="wrapper">
    <el-dialog :visible.sync="dialogVisible" width="650px" class="wer" @open="onDialogOpen">
      <div class="el-wrap">
        <div class="el-left">
          <circle-img :src=teacherProfile.teaAvatar></circle-img>
          <div class="form-teacherProfile">
            <label>姓名：</label>
            <span>{{teacherProfile.teaName}}</span>
          </div>
          <div class="form-teacherProfile">
            <label>性别：</label>
            <span>{{teacherProfile.teaGender}}</span>
          </div>
          <div class="form-teacherProfile">
            <label>教师号：</label>
            <span>{{teacherProfile.teaNo}}</span>
          </div>
        </div>
        <div class="el-right">
          <div class="form-teacherProfile">
            <label>学院：</label>
            <span>{{teacherProfile.colName}}</span>
          </div>
          <div class="form-teacherProfile">
            <label>职称：</label>
            <span>{{teacherProfile.teaTitle}}</span>
          </div>
          <div class="form-teacherProfile">
            <label>研究方向：</label>
            <span>{{teacherProfile.teaResearch}}</span>
          </div>
          <div class="form-teacherProfile">
            <label>联系方式：</label>
            <span>{{teacherProfile.teaPhone}}</span>
          </div>
          <div class="form-teacherProfile">
            <label>邮箱：</label>
            <span>{{teacherProfile.teaEmail}}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CircleImg from '@/views/common/CircleImg.vue'
export default {
  name: 'TeacherInfo',
  props: {
    visible: Boolean,
    teaNo: String
  },
  components: {
    CircleImg
  },
  data () {
    return {
      dialogVisible: false,
      teacherProfile: {
        teaNo: '',
        teaName: '',
        teaAvatar: '',
        teaGender: '',
        teaTitle: '',
        colName: '',
        teaResearch: '',
        teaPhone: '',
        teaEmail: ''
      }
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
    },
    dialogVisible () {
      this.$emit('update:visible', this.dialogVisible)
    }
  },
  methods: {
    onDialogOpen () {
      this.$axios.get(`/api/teacher/${this.teaNo}/profile`)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.teacherProfile = result.data
          } else {
            this.$message.error(result.msg)
          }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.wer >>> .el-dialog__header {
  text-align: center;
  height: 33px;
  letter-spacing: 2px;
}

.wer >>> .el-dialog__body {
  padding-bottom: 60px;
  padding-top: 20px;
}

.wer >>> .el-dialog__close {
  display: none;
}

.el-wrap {
  width: 100%;
  height: 300px;

  .el-left {
    float: left;
    margin-left: 41px;
    text-align: center;
    width: 213px;
    height: 100%;
    border-right: 1px solid #ccc;
  }

  .el-right, .el-left {
    .form-teacherProfile {
      margin: 10px;
      margin-top: 30px;
      letter-spacing: 1px;
      text-align: left;
      text-indent: 1em;
    }
  }

  .el-left {
    .form-teacherProfile {
      margin-top: 22px;
    }
  }

  .el-right {
    float: right;
    width: 330px;
    height: 100%;
    padding-left: 5px;
  }
}
</style>
